我的React开发之路1:React的环境搭建

React是大脸书出的一个前端开发框架。与其说是一个框架，我更加认为React更是一种模式，从2015年10月份开始接触React，我就认为这个框架以后一定会火。React是一个单向数据流的框架，不同于Vue和Angular的双向数据绑定 React的单向数据流可以数据模式更加单一，更利于前端的维护。 好了，废话不多说 如果想具体学习React，可以参考我以后的教程或者参考网上大量的资料 还有万能的github
React环境的搭建
首先得明白React的开发是基于JSX去开发的，所以我们第一步做的就是编译JSX 因为普通的浏览器并不懂的JSX 当然你也可以这样:

<script type="text/babel">
  //TODO your jsx
</script>

个人十份不建议用以上的方式因为非常不利于代码的维护和开发而且也有各种的兼容性问题 当然 你想测试jsx就可以是用 编译JSX的方式非常多：webpack browserify+gulp+babelify 或者使用TypeScript用微软的编译器去编译
首先本人比较习惯第二种方式 也是介绍第二种方式
第一步
安装必要的工具 node.js gulp
安装node.js 去官网安装node的最新版 下载根据提示安装即可
安装gulp 在node安装完之后 你需要用npm的命令去安装gulp :

npm install gulp -g

安装好gulp之后，就开始构建项目，可以新建一个目录名字，命令行指向该目录，也就是cd到此目录
输入以下的命令：

npm init

根据提示做完以下的工作之后， 在目录中就会有一个名字叫做package.json的文件，然后就需要一些安装一些开发插件了
1、我们需要将gulp安装到项目目录里来；

npm install gulp --save//
//或者
npm install --save gulp 

2、安装browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

这一步主要是安装一些编译器和一些必要的插件 具体怎么用后面会详细的说
3、安装react 和react-dom

npm install react react-dom --save

既然是react的开发 就必须要有react
4、写好babel的配置：
创建一个叫做.babelrc的文件 在里面输入以下的代码

{
  "presets": ["react","es2015"]
}

这个是babel编译器需要的插件用来编译es6和react的jsx的语法
5、创建一个叫做gulpfile.js的文件 这个是gulp的执行文件 以下代码是一个简单的构建react项目的gulpfile.js的代码

//gulp需要的模块
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 任务 用于创建本地服务器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:'localhost'
    })
});
//编译任务 
gulp.task("browserify",function(){
     //entris:入口文件的js  
    return browserify({entries: './domsrc/app/Main.js', extensions: ['.jsx']})
         //用babel转换
        .transform(babel)
        //需要browserify-shim转换
        .transform(require('browserify-shim'))
        //bundle合并
        .bundle()
        .pipe(source('bundle.js'))
        //编译文件目标目录
        .pipe(gulp.dest('./bin-debug'));
});

6、package.json的配置文件修改:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

将这段代码加入到package.json里面 就可以了 现在环境基本已经搭建完成

测试
我们在工程目录下创建一个名为domsrc的目录 在这个目录下在创建一个app目录 里面创建一个Main.js的文件，
文件里的代码参考如下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(<div>Hello World</div>,document.getElementById("content"));
    }
}
new Main();

然后在该目录下执行以下命令行

gulp browserify

可以看到在bin-debug生成了bundle.js的文件